<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 13:30:57
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-02 14:41:28
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractFileSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同档案详情 -->
<template>
  <ContentCard v-if="contractList.length > 0">
    <template #header>
      <PageHeaderNew :title="title" :showBack="true"></PageHeaderNew>
    </template>
    <a-layout>
      <a-layout>
        <a-layout-content class="main">
          <vue-office-pdf :src="currFileData.url" v-if="fileSuffix === 'pdf'" />
          <vue-office-docx
            :src="currFileData.url"
            v-else-if="fileSuffix === 'docx'"
          />
          <vue-office-excel
            :src="currFileData.url"
            v-else-if="fileSuffix === 'xlsx'"
          />
          <a-image v-else :src="currFileData.url" />
          <!-- <RichTextNew
            v-model:content="detailData.data[currFileIndex].text"
            :name="`rich${detailData.data[currFileIndex].id}`"
            disabled
          ></RichTextNew> -->
        </a-layout-content>
        <a-layout-sider style="width: 220px; margin-left: 1px" class="right">
          <!-- <header>合同文件11</header>
          <a-divider />
          <section>
            <div class="title">
              <div
                @click="fileClick(0)"
                class="item"
                :class="currFileIndex === 0 ? 'item-select' : ''"
              >
                1、{{ detailData.data[0]?.name }}
              </div>
            </div>
            <a-divider />
          </section> -->
          <header>文件</header>
          <a-divider />
          <section>
            <div
              class="title"
              v-for="(item, index) in contractList"
              :key="index"
            >
              <div
                @click="fileClick(item, index)"
                class="item"
                :class="currFileIndex === index ? 'item-select' : ''"
              >
                {{ +index + 1 }}、{{ item?.name }}
              </div>
            </div>
            <a-divider />
          </section>
        </a-layout-sider>
      </a-layout>
    </a-layout>
  </ContentCard>
</template>

<script setup lang="ts">
import { GetBusinessModalData } from '@/apis/controltotal';
import { GetContractDetail } from '@/apis/management/contract/contractManagement/file';
import { changeControlData } from '@/utils/control';
import { SwitchDraftWaitSignedContract } from '@/apis/management/contract/contractManagement/waitSigned';
import { GetConfirmWaitSignedContractSignFile } from '@/apis/management/contract/contractManagement/waitSigned';
import VueOfficePdf from '@vue-office/pdf';
import VueOfficeDocx from '@vue-office/docx';
import { getFileSuffix } from '@/utils/file';

const route = useRoute();
const id = +route.query.id;
const userId = +route.query.userId;

const title = '合同档案详情';

let currFileIndex = ref(0); // 文件索引

// 储存当前文件的后缀
let fileSuffix = ref('');
let currFileData = ref();
let contractList = ref([]);
const getData = async () => {
  try {
    const [res] = await Promise.all([
      GetConfirmWaitSignedContractSignFile({
        id: userId,
        typeId: id
      })
    ]);
    currFileData.value = res[0];
    // console.log(currFileData.value);
    fileSuffix.value = getFileSuffix(currFileData.value.name);
    contractList.value = res;
    console.log('==============currFileData======================');
    console.log(currFileData.value);
    console.log(fileSuffix.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 点击右边文件栏
const fileClick = (file: any, index: number) => {
  currFileData.value = file;
  fileSuffix.value = getFileSuffix(file.name);
  currFileIndex.value = index;
};
</script>

<style lang="less" scoped>
.right {
  header {
    font-size: 16px;
    font-weight: 700;
    height: 28px;
    line-height: 28px;
    &::before {
      margin-left: 10px;
      content: '';
      display: inline-block;
      width: 6px;
      height: 20px;
      margin-right: 10px;
      background: #165dff;
      position: relative;
      top: 5px;
      border-radius: 3px;
    }
  }
  section {
    // 文字太长显示省略号，并且不换行
    .title {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px;

      .item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &-select {
          background-color: #eee;
        }

        &:hover {
          background-color: #eee;
        }
      }
    }
  }
}

.main {
  margin: 0 20px;
}

.right {
  .custom-radio-card {
    background-color: #fff;
  }
  .custom-radio-card:hover,
  .custom-radio-card-checked {
    border-color: rgb(var(--primary-6));
  }
}

:deep(.arco-radio-group .arco-radio) {
  margin: 0;
  width: 100%;
}
</style>
